@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    overflow: -moz-scrollbars-none;
    /* Firefox */
  }

  .scrollable-indicator {
    background:
      linear-gradient(hsl(var(--background)) 30%, hsl(var(--background) / 0)),
      linear-gradient(hsl(var(--background)), hsl(var(--background)) 0%) 0 100%,
      radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.1), transparent),
      radial-gradient(
          farthest-side at 50% 100%,
          hsl(var(--background-shadow) / 0.1),
          rgba(0, 0, 0, 0)
        )
        0 100%;
    background-repeat: no-repeat;
    background-color: hsl(var(--background));
    background-size:
      100% 60px,
      100% 60px,
      100% 6px,
      100% 6px;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
  }

  .custom-scrollbar {
    /** Make scrollbar to not take space **/
    overflow: overlay !important;
  }

  .custom-scrollbar::-webkit-scrollbar {
    @apply w-5 h-5;
  }

  .custom-scrollbar.screenshot {
    overflow: hidden !important;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400;
    @apply rounded-full bg-clip-padding border-solid;
    @apply border-transparent border-[6px];
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  .sidebar-icon-mask {
    clip-path: polygon(0 0, 100% 0, 100% 48%, 48% 48%, 48% 100%, 0 100%);
  }

  iframe[src*='pipedream.com'] {
    /* fixes: shadcn modals traps pointer events */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }

  .standalone-tooltip {
    @apply relative;

    /* Default position: top */
    &::before {
      content: attr(data-tooltip);
      @apply absolute bottom-full left-1/2 transform -translate-x-1/2;
      @apply px-3 py-1.5 text-xs font-semibold rounded-md overflow-hidden;
      @apply opacity-0 pointer-events-none transition-opacity duration-300 delay-700;
      @apply w-max max-w-96 break-words text-center z-50;
      @apply bg-foreground text-background;
      @apply mb-1;
    }

    &:hover::before {
      @apply opacity-100;
    }

    /* Bottom position */
    &[data-tooltip-position='bottom']::before {
      @apply bottom-auto top-full left-1/2 transform -translate-x-1/2 mt-1 mb-0;
    }

    /* Left position */
    &[data-tooltip-position='left']::before {
      @apply bottom-auto top-1/2 left-auto right-full transform -translate-y-1/2 translate-x-0 mr-1 mb-0;
    }

    /* Right position */
    &[data-tooltip-position='right']::before {
      @apply bottom-auto top-1/2 right-auto left-full transform -translate-y-1/2 translate-x-0 ml-1 mb-0;
    }

    /* Centered position */
    &[data-tooltip-position='center']::before {
      @apply bottom-auto top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0;
    }
  }

  .glow-primary {
    --from-glow-color: hsl(var(--primary) / 0.075);
    --to-glow-color: hsl(var(--primary) / 0.15);
  }

  .glow-latte {
    --from-glow-color: hsl(var(--latte-border) / 0.375);
    --to-glow-color: hsl(var(--latte-border) / 0.75);
  }

  pre:has(.remove-prose-pre) {
    padding: 0 !important;
    background: none !important;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --background-shadow: 0 0% 0%;
    --background-code: 0 0% 98%;
    --background-gray: 0 0% 99%;
    --foreground: 224 71.5% 4%;

    --card: 0 0% 100%;
    --card-foreground: 223 70% 4%;

    --popover: 0 0% 100%;
    --popover-foreground: 223 70% 4%;

    --primary: 211 94% 43%;
    --primary-foreground: 210 20% 98%;
    --primary-muted: 210 100% 96%;
    --primary-muted-hover: 210 100% 97%;

    --secondary: 210 20% 98%;
    --secondary-foreground: 221 39% 11%;

    --yellow: 41 96% 91%;

    --purple: 289 51% 92%;
    --purple-foreground: 289 51% 14%;

    --muted: 220 14% 96%;
    --muted-foreground: 211 11% 45%;

    --accent: 210 100% 97%;
    --accent-button: 211 97% 35%;
    --accent-foreground: 211 97% 35%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --destructive-muted: 0 93% 94%;
    --destructive-muted-foreground: 0 74% 42%;

    --success: 142 72% 29%;
    --success-foreground: 120 87% 97%;
    --success-muted: 141 84% 93%;
    --success-muted-foreground: 142 72% 29%;

    --warning-muted: 48 96% 89%;
    --warning-muted-foreground: 26 90% 37%;

    --border: 0 0% 89.8%;
    --input: 0 0% 84.8%;
    --ring: 211 94% 43%;

    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

    --radius: 0.5rem;

    --latte: 45 99% 55%;
    --latte-border: 42.5 51% 81.5%;
    --latte-background: 43 71% 98%;
    --latte-widget-background: 43 51% 82%;
    --latte-input-background: 43 100% 91%;
    --latte-input-foreground: 43 100% 23%;
    --latte-output-foreground: 43 25% 33%;
    --latte-badge-border: 45 81% 44%;
  }

  .dark {
    --background-code: 0 0% 11%;
    --background-gray: 0 0% 10%;
    --background: 0 0% 7%;
    --background-shadow: 0 0% 100%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 210 98% 24%;
    --primary-foreground: 210 20% 98%;
    --primary-muted: 210 100% 12%;
    --primary-muted-hover: 210 100% 16%;

    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 98%;

    --yellow: 41 90% 14%;

    --purple: 289 51% 14%;
    --purple-foreground: 289 51% 65%;

    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

    --accent: 211 88% 10%;
    --accent-button: 211 97% 35%;
    --accent-foreground: 211 94% 65%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --destructive-muted: 0 75% 10%;
    --destructive-muted-foreground: 0 75% 56%;

    --success: 142 76% 36%;
    --success-foreground: 120 87% 97%;
    --success-muted: 141 84% 10%;
    --success-muted-foreground: 142 76% 36%;

    --warning-muted: 48 100% 10%;
    --warning-muted-foreground: 49 100% 36%;

    --border: 231 9% 12.9%;
    --input: 0 0% 14.9%;
    --ring: 205 91% 44%;

    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

    --latte: 45 99% 55%;
    --latte-border: 45 81% 44%;
    --latte-background: 43 71% 8%;
    --latte-widget-background: 43 51% 82%;
    --latte-input-background: 45 99% 55%;
    --latte-input-foreground: 43 100% 23%;
    --latte-output-foreground: 43 25% 83%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@layer base {
  :root {
    .latitude-data-grid {
      --rdg-background-color: hsl(var(--background));
      --rdg-color: hsl(var(--foreground));
      --rdg-border-color: hsl(var(--border));
      --rdg-selection-color: hsl(var(--ring));
      --rdg-header-background-color: hsl(var(--background-gray));
      --rdg-header-draggable-background-color: hsl(var(--muted));
      --rdg-row-hover-background-color: hsl(var(--muted));
      --rdg-row-selected-background-color: hsl(var(--accent));
      --rdg-row-selected-hover-background-color: hsl(var(--accent));
      --rdg-checkbox-focus-color: hsl(var(--accent-button));
    }
  }

  .dark {
    .latitude-data-grid {
      --rdg-background-color: hsl(var(--background));
      --rdg-color: hsl(var(--foreground));
      --rdg-border-color: hsl(var(--border));
      --rdg-selection-color: hsl(var(--ring));
      --rdg-header-background-color: hsl(var(--background-gray));
      --rdg-header-draggable-background-color: hsl(var(--muted));
      --rdg-row-hover-background-color: hsl(var(--muted));
      --rdg-row-selected-background-color: hsl(var(--accent));
      --rdg-row-selected-hover-background-color: hsl(var(--accent-button));
      --rdg-checkbox-focus-color: hsl(var(--accent-button));
    }
  }

  input[type='number'].appearance-none::-webkit-inner-spin-button,
  input[type='number'].appearance-none::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type='number'].appearance-none {
    -moz-appearance: textfield;
    appearance: textfield;
  }
}

.latitude-data-grid .rdg-cell {
  border-inline-end: 1px solid var(--rdg-border-color);
  border-block-end: 1px solid var(--rdg-border-color);
}

.latitude-data-grid .rdg-header-row .rdg-cell:first-child {
  @apply rounded-tl-lg;
}

.latitude-data-grid .rdg-cell[aria-selected='true'] {
  outline-color: transparent;
}

.latitude-data-grid .rdg-header-row .rdg-cell:last-child,
.latitude-data-grid .rdg-row .rdg-cell:last-child {
  border-inline-end: none;
}

[role='grid-wrapper'] .monaco-editor {
  --vscode-editor-background: var(--rdg-background-color);
  @apply text-foreground bg-background;
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

[role='grid-wrapper'] .monaco-editor .margin {
  --vscode-editorGutter-background: var(--rdg-background-color);
}

[role='grid-wrapper'] .monaco-editor .scroll-decoration {
  display: none;
}

[role='grid-wrapper'] .monaco-editor .view-line .mtk1 {
  color: var(--foreground);
}
